<template>
  <div class="ai-shop W-100">
    <div class="display-flex flex-between" style="margin-bottom: 18px">
      <p class="courseOutline-title">AI教学工坊</p>
      <img class="ai-tool" src="@/assets/images/bt_AItools.png" />
    </div>
    <div class="tool-box">
      <div
        class="tool-item cursor-pointer font-size-16"
        v-for="(item, index) in toolList"
        :key="index"
      >
        <img class="tool-img w-100" :src="item.toolImg" />
        <p class="color-18191A ai-title margin-bottom-16">
          <span class="vertical-align-middle">{{ item.toolTitle }}</span>
          <span
            class="tool-tag color-fff font-size-12 text-center margin-left-8"
            >{{ item.toolTagName }}</span
          >
        </p>
        <p class="color-696E76">{{ item.toolDesc }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import one from '@/assets/images/pic_aikjzz.png'
import two from '@/assets/images/pic_aija.png'
import three from '@/assets/images/pic_aict.png'
import four from '@/assets/images/pic_aiht.png'
import five from '@/assets/images/pic_aigssb.png'
import six from '@/assets/images/pic_aipy.png'
import seven from '@/assets/images/pic_aixqfx.png'
import eight from '@/assets/images/pic_aixxzlfx.png'
import nine from '@/assets/images/pic_aiwxydlj.png'
import ten from '@/assets/images/pic_aispzwz.png'
import eleven from '@/assets/images/pic_aizntzxdj.png'
import twelve from '@/assets/images/pic_aikfjk.png'
const toolList = ref([
  {
    index: 0,
    toolImg: one,
    toolTagName: '智能备课',
    toolTitle: 'AI 课件制作',
    toolDesc: '智能生成多媒体教学素材'
  },
  {
    index: 1,
    toolImg: two,
    toolTagName: '智能备课',
    toolTitle: 'AI 教案',
    toolDesc: '一键生成结构化教学方案'
  },
  {
    index: 2,
    toolImg: three,
    toolTagName: '智能备课',
    toolTitle: 'AI 出题',
    toolDesc: '按知识点智能组卷的提效工具'
  },
  {
    index: 3,
    toolImg: four,
    toolTagName: '智能备课',
    toolTitle: 'AI 绘图',
    toolDesc: '教学素材智能绘制神器'
  },
  {
    index: 4,
    toolImg: five,
    toolTagName: '智能备课',
    toolTitle: 'AI 公式识别',
    toolDesc: '文档公式智能解析与转换'
  },
  {
    index: 5,
    toolImg: six,
    toolTagName: '教学评价',
    toolTitle: 'AI 批阅',
    toolDesc: '作业试卷智能评分助手'
  },
  {
    index: 6,
    toolImg: seven,
    toolTagName: '教学评价',
    toolTitle: 'AI 学情分析',
    toolDesc: '多维度学习数据可视化分析'
  },
  {
    index: 7,
    toolImg: eight,
    toolTagName: '教学评价',
    toolTitle: 'AI 学习资料分析',
    toolDesc: '智能梳理归类学习文档'
  },
  {
    index: 8,
    toolImg: nine,
    toolTagName: '辅助学习',
    toolTitle: 'AI 文献阅读理解',
    toolDesc: '学术资料智能解析与摘要'
  },
  {
    index: 9,
    toolImg: ten,
    toolTagName: '辅助学习',
    toolTitle: 'AI 视频转文字',
    toolDesc: '课程视频自动生成文本字幕'
  },
  {
    index: 10,
    toolImg: eleven,
    toolTagName: '教学工具',
    toolTitle: 'AI 智能体自行搭建',
    toolDesc: '自定义教学辅助智能体工具'
  },
  {
    index: 11,
    toolImg: twelve,
    toolTagName: '教学工具',
    toolTitle: '开放接口',
    toolDesc: '教学功能模块化开发接入平台'
  }
])
onMounted(() => {})
</script>

<style lang="scss" scoped>
.ai-shop {
  height: 1076px;
  padding: 64px 64px 0;
  box-sizing: border-box;
  background-image: url('@/assets/images/BG_AIjxgf.png');
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 24px;
  .courseOutline-title {
    display: inline-block;
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 24px;
    color: #18191a;
    line-height: 30px;
    border-bottom: 2px solid #0f63ed;
    margin-bottom: 18px;
  }
  .ai-tool {
    width: 99px;
    height: 32px;
  }
  .tool-box {
    overflow-x: hidden;
    .tool-item {
      width: calc((100% - 72px) / 4);
      height: 276px;
      margin-right: 24px;
      padding: 16px;
      box-sizing: border-box;
      float: left;
      background-image: url('@/assets/images/bg_nor.png');
      background-repeat: no-repeat;
      background-size: 100%;
      margin-top: 24px;
      .tool-img {
        height: 150px;
      }
      .ai-title {
        margin-top: 26px;
      }
      .tool-tag {
        display: inline-block;
        width: 68px;
        height: 20px;
        background: linear-gradient(311deg, #5f49e5 0%, #8e7cfa 100%);
        border-radius: 14px 14px 14px 14px;
      }
    }
    .tool-item:hover {
      background-image: url('@/assets/images/bg_hover.png');
    }
    .tool-item:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
